<template>
  <div id="box-center">
    <div id="box-menu">
      <span>选择日期：</span>
      <el-date-picker
        v-model="selection.date"
        type="date"
        value-format="yyyy-MM-dd"
        size="small"
        placeholder="选择日期"
        @change="updateData"
      ></el-date-picker>
    </div>
    <div id="box-body">
      <el-table :data="tableData" style="width: 100%;" height="435" size="mini">
        <el-table-column label="设备名称">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.label }}</span>
          </template>
        </el-table-column>
        <el-table-column label="项目">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.item }}</span>
          </template>
        </el-table-column>
        <el-table-column label="异常值">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.value }}</span>
          </template>
        </el-table-column>
        <el-table-column label="记录时间">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.time }}</span>
          </template>
        </el-table-column>
        <el-table-column label="记录日期">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.date }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="180">
          <template slot-scope="scope">
            <el-button size="mini" type="danger" @click="handleDelete(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 50, 100]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next"
        :total="dataCount"
        background
        style="width: 100%;margin-top: 10px;"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
import { formatDate } from "@/api/time.js";
import { getWarnDataList, deleteWarnData } from "@/api/manage.js";
export default {
  data() {
    return {
      selection: {
        date: formatDate(),
      },
      tableData: [],
      currentPage: 1,
      pageSize: 10,
      dataCount: 0,
    };
  },
  methods: {
    updateData() {
      getWarnDataList(this.currentPage, this.pageSize, this.selection.date).then((response) => {
        if (response.flag) {
          this.tableData = response.data.data;
          this.dataCount = response.data.total;
        } else {
          this.$message({
            message: response.message,
            type: "error",
            center: true,
          });
        }
      });
    },
    handleDelete(id) {
      deleteWarnData(id).then((response) => {
        if (response.flag) {
          this.$message({
            message: response.message,
            type: "success",
            center: true,
          });
        } else {
          this.$message({
            message: "删除数据失败",
            type: "error",
            center: true,
          });
        }
        this.updateData();
      });
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.updateData();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.updateData();
    },
  },
  created() {
    this.updateData();
  }
};
</script>

<style lang="scss" scoped>
@import "@/styles/myCss/table.scss";
</style>